<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>智能超市</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css"/>
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container index-cont">
    <div class="row">
        <div class="col-xs-4">
            <h5>用户名: 李竞翊</h5>
            <h5>卡内余额: 100.10</h5>
            <h5>李竞翊的购物车</h5>
        </div>
        <div class="col-xs-4">
            <a class="btn btn-lg btn-warning" href="##">充值</a>
            <div class="p"><i class="iconfont play">&#xe673;</i>语音播报所选商品</div>
        </div>
        <div class="col-xs-4">
            <p class="datetime">2015.05.26 星期二</p>
            <p class="time">21:23:29</p>
            <i class="iconfont search">&#xe68a;</i><input type="text" class="form-control" placeholder="搜索...">
        </div>
    </div>

    <div class="row">
        <div class="col-xs-8">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">全部商品</button>
                <button type="button" class="btn btn-default">打折商品</button>

                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        类别
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">饮料</a></li>
                        <li><a href="#">日用品</a></li>
                        <li><a href="#">办公用品</a></li>
                        <li><a href="#">床上用品</a></li>
                        <li><a href="#">食品</a></li>
                        <li><a href="#">水果</a></li>

                    </ul>
                </div>
            </div>
        </div>

    </div>


    <div class="row" style="margin-bottom: 0">
        <table class="table">
            <tr>
                <th>编号</th>
                <th>分类</th>
                <th>商品信息</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>酒水</td>
                <td>山城瓶酒(罐装250ml)</td>
                <td>2.49</td>
                <td><input type="number" value="1" class="form-control" style="width: 80px;"/></td>
                <td>2.49</td>
                <td><a class="btn btn-sm btn-danger" href="##">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>食品</td>
                <td>妙脆角(番茄味100g)</td>
                <td>9.49</td>
                <td><input type="number" value="1" class="form-control" style="width: 80px;"/></td>
                <td>9.49</td>
                <td><a class="btn btn-sm btn-danger" href="##">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

        </table>
    </div>

    <div class="row" >
        <div class="col-xs-5">
            <nav>
                <ul class="pagination">
                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                </ul>
            </nav>
        </div>
        <div class="col-xs-1">
            <a class="btn btn-default" href="##" style="position: relative; left: -25px;">下一页</a>
        </div>
        <div class="col-xs-6" style="text-align: right;">
            <label style="margin-right:5px;">总计: 11.98</label>
            <a class="btn btn-info" href="##">结算</a>
            <a class="btn btn-warning" href="##">取消交易</a>
        </div>
    </div>
</div>

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>